import React from "react";
import { RouteComponentProps } from "react-router-dom";
// import { observable } from "mobx";
import { observer } from "mobx-react";
import { Form, Input, Button, Layout } from "antd";
// import { wrapAuth } from "../../utils/HigherOrderComponents/constructor";
import { HttpClient } from "../../service/Http/HttpClient";
import { AjaxData } from "../../data/interface/publicInterface";
import { UserOutlined, KeyOutlined } from "@ant-design/icons";
import md5 from "js-md5";
import store from "../../store";
import { WebVariable } from "../../data/WebVariable";
import "./index.less";
const { Header, Footer, Content } = Layout;
const salt = WebVariable.salt;
//分项列表
export const LoginUser = (pream: string) => {
  const http = HttpClient.instance();

  return http.fetch("/api/mid/bmp/loginPe", {
    method: "POST",
    headers: {},
    body: pream,
  });
};
// const AuthButton = wrapAuth(Button);
@observer
export default class Login extends React.Component<
  RouteComponentProps & ILoginProps
> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    let { onFinish, onFinishFailed } = this;
    return (
      <Layout className="login">
        <Header className="login_header">能源综合管理应用平台</Header>
        <Content className="login_body">
          <div className="login_box">
            <div className="box_title">账号登陆</div>
            <div className="box_body">
              <Form
                name="basic"
                initialValues={{ verifyCode: "string", verifyToken: "string" }}
                onFinish={(values: any) => {
                  onFinish(values);
                }}
                onFinishFailed={onFinishFailed}
              >
                <Form.Item
                  name="loginName"
                  className="action"
                  rules={[{ required: true, message: "请输入用户名!" }]}
                >
                  <Input
                    prefix={<UserOutlined />}
                    bordered={false}
                    placeholder="请输入用户名!"
                  />
                </Form.Item>

                <Form.Item
                  name="loginPwd"
                  rules={[{ required: true, message: "请输入密码!" }]}
                >
                  <Input.Password
                    prefix={<KeyOutlined />}
                    bordered={false}
                    placeholder="请输入密码!"
                  />
                </Form.Item>
                <div className="forgetPass">忘记密码？</div>
                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{ height: 40 }}
                    block
                  >
                    登陆
                  </Button>
                </Form.Item>
              </Form>
              {/* <AuthButton auth="createUser" type="primary">
                登陆管理平台
              </AuthButton> */}
            </div>
          </div>
          <div className="im_bg"></div>
        </Content>
        <Footer className="login_footer"></Footer>
      </Layout>
    );
  }
  onFinish = async (values: any) => {
    values.loginType = 0;
    values.randomData = Math.random();
    values.loginPwd = md5(values.loginPwd + salt);
    let dat = JSON.stringify(values);
    let res: any = await LoginUser(dat);
    let Json: AjaxData = res;
    if (Json.success) {
      store.LoginUserAdmin.setUserInfo(Json.data);
      this.props.history.push({ pathname: "/Portal/Index" });
    }
  };

  onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
}

export interface TloginFDate {
  code: number; //状态码
  data: any; //数据
  message: string; //提示信息
  success: boolean;
  time: string;
}
export interface ILoginProps {}
